<template>
  <div class="checkout-result-container">
    <el-card class="result-card">
      <div class="result-icon success">
        <el-icon><CircleCheck /></el-icon>
      </div>
      <h2>结算成功</h2>
      
      <div class="summary">
        <p>共下载 {{ downloadData.downloads.length }} 个资料</p>
        <p>消耗虚拟币: <span class="coins">{{ downloadData.totalCost }}</span></p>
        <p>剩余虚拟币: <span class="coins">{{ downloadData.remainingCoins }}</span></p>
      </div>
      
      <div class="download-list">
        <h3>下载列表</h3>
        <el-table :data="downloadData.downloads" style="width: 100%">
          <el-table-column prop="material.title" label="资料名称" />
          <el-table-column label="版本" width="120">
            <template #default="{row}">
              <el-tag :type="row.isWatermark ? '' : 'success'">
                {{ row.isWatermark ? '带水印' : '无水印' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="cost" label="价格" width="120">
            <template #default="{row}">
              {{ row.cost }} 虚拟币
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="{row}">
              <el-button 
                type="primary" 
                size="small"
                @click="downloadMaterial(row)"
              >
                下载
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <div class="actions">
        <el-button @click="goToMaterials">返回资料中心</el-button>
        <el-button type="primary" @click="downloadAll">全部下载</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { CircleCheck } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/store/user'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const downloadData = ref({
  downloads: [],
  totalCost: 0,
  remainingCoins: 0
})

// 下载单个资料
const downloadMaterial = (item) => {
  window.open(item.downloadUrl, '_blank')
}

// 下载全部资料
const downloadAll = () => {
  downloadData.value.downloads.forEach(item => {
    window.open(item.downloadUrl, '_blank')
  })
}

// 跳转到资料中心
const goToMaterials = () => {
  router.push('/materials')
}

// 从路由参数加载数据
onMounted(() => {
  if (route.query.data) {
    try {
      downloadData.value = JSON.parse(decodeURIComponent(route.query.data))
      userStore.user.virtualCoins = downloadData.value.remainingCoins
    } catch (error) {
      console.error('解析结算数据失败:', error)
    }
  }
})
</script>

<style scoped>
.checkout-result-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.result-card {
  padding: 30px;
  text-align: center;
}

.result-icon {
  font-size: 60px;
  margin-bottom: 20px;
}

.result-icon.success {
  color: var(--el-color-success);
}

.summary {
  margin: 20px 0;
  font-size: 16px;
}

.summary p {
  margin: 10px 0;
}

.coins {
  font-weight: bold;
  color: var(--el-color-primary);
}

.download-list {
  margin: 30px 0;
  text-align: left;
}

.actions {
  margin-top: 30px;
}
</style>